<template>
    <n-popover trigger="hover">
        <template #trigger>
            <n-button class="main-framework-header-func_button"  quaternary circle @click="store.switchTheme()">
                <template #icon>
                    <n-icon size="20px" v-if="store.app.setting.ui.dark">
                        <LightModeTwotone />
                    </n-icon>
                    <n-icon size="20px" v-else>
                        <NightlightOutlined />
                    </n-icon>
                </template>
            </n-button>
        </template>
        <span>切换主题</span>
    </n-popover>
</template>

<script setup lang="ts">
import { useMainStore } from '@/utils/store'
import { LightModeTwotone, NightlightOutlined } from '@vicons/material'
const store = useMainStore()
</script>

<style lang="scss" scoped>
.main-framework-header-func_button:hover {
    background-color: #f0f0f070;
    color: orange;
}

</style>
